<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="aaton">
    
    <title>
        
            Javascript之序列化与反序列化 |
        
        aaton&#39;s study notes
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/logo.svg">
    
<link rel="stylesheet" href="/font/css/fontawesome.min.css">

    
<link rel="stylesheet" href="/font/css/regular.min.css">

    
<link rel="stylesheet" href="/font/css/solid.min.css">

    
<link rel="stylesheet" href="/font/css/brands.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {}
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"en"}
    KEEP.theme_config = {"toc":{"enable":false,"number":false,"expand_all":false,"init_open":false},"style":{"primary_color":"#0066cc","logo":"/images/logo.svg","favicon":"/images/logo.svg","avatar":"/images/avatar.svg","font_size":null,"font_family":null,"hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"header_transparent":true,"background_img":"/images/bg.svg","description":"Keep writing and Keep loving.","font_color":null,"hitokoto":true},"scroll":{"progress_bar":false,"percent":false}},"local_search":{"enable":false,"preload":false},"code_copy":{},"code_block":{"tools":{"enable":true,"style":"default"},"highlight_theme":"default"},"side_tools":{},"pjax":{"enable":false},"lazyload":{"enable":false},"comment":{"enable":false,"use":"valine","valine":{"appid":null,"appkey":null,"server_urls":null,"placeholder":null},"gitalk":{"github_id":null,"github_admins":null,"repository":null,"client_id":null,"client_secret":null,"proxy":null},"twikoo":{"env_id":null,"region":null,"version":"1.6.8"},"waline":{"server_url":null,"reaction":false,"version":2}},"post":{"author_label":{"enable":true,"auto":true,"custom_label_list":["Trainee","Engineer","Architect"]},"word_count":{"enable":true,"wordcount":true,"min2read":true},"img_align":"left","copyright_info":false},"version":"3.6.1"}
    KEEP.language_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"}
    KEEP.language_code_block = {"copy":"Copy code","copied":"Copied","fold":"Fold code block","folded":"Folded"}
    KEEP.language_copy_copyright = {"copy":"Copy copyright info","copied":"Copied","title":"Original article title","author":"Original article author","link":"Original article link"}
  </script>
<meta name="generator" content="Hexo 6.3.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            
<header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
                <a class="logo-image" href="/">
                    <img src="/images/logo.svg">
                </a>
            
            <a class="logo-title" href="/">
               aaton&#39;s study notes
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                HOME
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                ARCHIVES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/tags"
                            >
                                TAGS
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                CATEGORIES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                ABOUT
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">HOME</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">ARCHIVES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/tags">TAGS</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">CATEGORIES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">ABOUT</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="post-page-container">
        <div class="article-content-container">

            <div class="article-title">
                <span class="title-hover-animation">Javascript之序列化与反序列化</span>
            </div>

            
                <div class="article-header">
                    <div class="avatar">
                        <img src="/images/avatar.svg">
                    </div>
                    <div class="info">
                        <div class="author">
                            <span class="name">aaton</span>
                            
                                <span class="author-label">Lv3</span>
                            
                        </div>
                        <div class="meta-info">
                            
<div class="article-meta-info">
    <span class="article-date article-meta-item">
        
            <i class="fa-regular fa-calendar-plus"></i>&nbsp;
        
        <span class="pc">2023-06-05 11:00:11</span>
        <span class="mobile">2023-06-05 11:00</span>
    </span>
    
        <span class="article-update-date article-meta-item">
        <i class="fas fa-file-pen"></i>&nbsp;
        <span class="pc">2023-06-03 17:29:28</span>
    </span>
    
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/Javascript/">Javascript</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/%E5%BA%8F%E5%88%97%E5%8C%96/">序列化</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/%E5%8F%8D%E5%BA%8F%E5%88%97%E5%8C%96/">反序列化</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
        <span class="article-wordcount article-meta-item">
            <i class="fas fa-file-word"></i>&nbsp;<span>1.1k Words</span>
        </span>
    
    
        <span class="article-min2read article-meta-item">
            <i class="fas fa-clock"></i>&nbsp;<span>4 Mins</span>
        </span>
    
    
        <span class="article-pv article-meta-item">
            <i class="fas fa-eye"></i>&nbsp;<span id="busuanzi_value_page_pv"></span>
        </span>
    
</div>

                        </div>
                    </div>
                </div>
            

            <div class="article-content keep-markdown-body">
                

                <p><img src="https://cn.bing.com/th?id=OHR.Unesco50_ZH-CN3652927413_1920x1200.jpg&rf=LaDigue_1920x1200.jpg" alt="bing.com-梅萨维德国家公园的悬崖宫，美国" title="bing.com-梅萨维德国家公园的悬崖宫，美国"></p>
<p>Javascript之序列化和反序列化简述，以及复杂对象的反序列化方法。</p>
<span id="more"></span>

<h1 id="1、序列化"><a href="#1、序列化" class="headerlink" title="1、序列化"></a>1、序列化</h1><p>将数据结构或对象<strong>转换成字符串</strong>的过程。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"> let obj = &#123;</span><br><span class="line">    name:&#x27;aaton&#x27;,</span><br><span class="line">    age:18,</span><br><span class="line">    ph:&#x27;18888888888&#x27;,</span><br><span class="line">    add:&#x27;北京市顺义区&#x27;</span><br><span class="line">&#125;</span><br><span class="line">console.log(JSON.stringify(obj))            //&#123;&quot;name&quot;:&quot;aaton&quot;,&quot;age&quot;:18,&quot;ph&quot;:&quot;18888888888&quot;,&quot;add&quot;:&quot;北京市顺义区&quot;&#125;</span><br><span class="line">console.log(obj)                            //&#123;&quot;name&quot;:&quot;aaton&quot;,&quot;age&quot;:18,&quot;ph&quot;:&quot;18888888888&quot;,&quot;add&quot;:&quot;北京市顺义区&quot;&#125;</span><br><span class="line">console.log(typeof(JSON.stringify(obj)))    //string</span><br><span class="line">console.log(typeof(obj))                    //object</span><br><span class="line">console.log(JSON.stringify(obj).name)       //undefined</span><br><span class="line">console.log(obj.name)                       //aaton</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="2、反序列化"><a href="#2、反序列化" class="headerlink" title="2、反序列化"></a>2、反序列化</h1><p>将在序列化过程中所生成的二进制串<strong>转换成数据结构或者对象</strong>的过程。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">let str = &#x27;&#123;&quot;name&quot;:&quot;aaton&quot;,&quot;age&quot;:18,&quot;ph&quot;:&quot;18888888888&quot;,&quot;add&quot;:&quot;北京市顺义区&quot;&#125;&#x27;</span><br><span class="line">console.log(JSON.parse(str))                //&#123; name: &#x27;aaton&#x27;, age: 18, ph: &#x27;18888888888&#x27;, add: &#x27;北京市顺义区&#x27; &#125;</span><br><span class="line">console.log(JSON.stringify(str))            //&quot;&#123;\&quot;name\&quot;:\&quot;aaton\&quot;,\&quot;age\&quot;:18,\&quot;ph\&quot;:\&quot;18888888888\&quot;,\&quot;add\&quot;:\&quot;北京市顺义区\&quot;&#125;&quot;</span><br><span class="line">console.log(str)                            //&#123;&quot;name&quot;:&quot;aaton&quot;,&quot;age&quot;:18,&quot;ph&quot;:&quot;18888888888&quot;,&quot;add&quot;:&quot;北京市顺义区&quot;&#125;</span><br><span class="line">console.log(typeof(JSON.stringify(str)))    //string</span><br><span class="line">console.log(typeof(JSON.parse(str)))        //object</span><br><span class="line">console.log(typeof(str))                    //string</span><br><span class="line">console.log(JSON.stringify(str).name)       //undefined</span><br><span class="line">console.log(JSON.parse(str).name)           //aaton</span><br><span class="line">console.log(str.name)                       //undefined</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="3、JSON的parse与stringify使用注意事项"><a href="#3、JSON的parse与stringify使用注意事项" class="headerlink" title="3、JSON的parse与stringify使用注意事项"></a>3、JSON的parse与stringify使用注意事项</h1><ul>
<li>JSON.stringify(value[, replacer [, space]])：用来将一个 JavaScript 值（对象或者数组）转换为一个 JSON 字符串，如果指定了 replacer 是一个函数，则可以选择性地替换值，或者如果指定了 replacer 是一个数组，则可选择性地仅包含数组指定的属性。</li>
<li>JSON.parse(text[, reviver])：用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。提供可选的 reviver 函数用以在返回之前对所得到的对象执行变换(操作)。</li>
<li>转换值如果有toJSON()方法，该方法定义什么值将被序列化。</li>
<li>非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。</li>
<li>布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">// 对象经过序列化和反序列化后，Boolean值仍会保留数据类型</span><br><span class="line">// 字符串中Boolean值如果外层带了引号，那么就只能会被认为是字符串</span><br><span class="line">let str1 = &#x27;&#123;&quot;name&quot;:&quot;aaton&quot;,&quot;age&quot;:18,&quot;ph&quot;:&quot;18888888888&quot;,&quot;add&quot;:&quot;北京市顺义区&quot;,&quot;man&quot;:&quot;true&quot;&#125;&#x27;</span><br><span class="line">console.log(JSON.parse(str1).man)                   //true</span><br><span class="line">console.log(typeof(JSON.parse(str1).man))           //string</span><br><span class="line"></span><br><span class="line">let str2 = &#x27;&#123;&quot;name&quot;:&quot;aaton&quot;,&quot;age&quot;:18,&quot;ph&quot;:&quot;18888888888&quot;,&quot;add&quot;:&quot;北京市顺义区&quot;,&quot;man&quot;:true&#125;&#x27;</span><br><span class="line">console.log(JSON.parse(str2).man)                   //true</span><br><span class="line">console.log(typeof(JSON.parse(str2).man))           //Boolean</span><br><span class="line"></span><br><span class="line">console.log(JSON.stringify(obj1))                   //Boolean值在序列化后不会像其他字符串类型一样外层带引号</span><br><span class="line"></span><br><span class="line">let obj1 = &#123;</span><br><span class="line">    name:&#x27;aaton&#x27;,</span><br><span class="line">    age:18,</span><br><span class="line">    ph:&#x27;18888888888&#x27;,</span><br><span class="line">    add:&#x27;北京市顺义区&#x27;,</span><br><span class="line">    man:true</span><br><span class="line">&#125;</span><br><span class="line">let obj2 = JSON.parse(JSON.stringify(obj1))</span><br><span class="line">console.log(obj2.man)                               //true</span><br><span class="line">console.log(typeof(obj2.man))                       //Boolean</span><br></pre></td></tr></table></figure>

<ul>
<li>undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时）。函数、undefined被单独转换时，会返回undefined，如JSON.stringify(function(){}) or JSON.stringify(undefined).</li>
<li>对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。</li>
<li>所有以 symbol 为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。</li>
<li>Date日期调用了toJSON()将其转换为了string字符串（同Date.toISOString()），因此会被当做字符串处理。</li>
<li>NaN和Infinity格式的数值及null都会被当做null。</li>
<li>其他类型的对象，包括Map&#x2F;Set&#x2F;weakMap&#x2F;weakSet，仅会序列化可枚举的属性。</li>
</ul>
<hr>
<h1 id="4、复杂对象的序列化与反序列化"><a href="#4、复杂对象的序列化与反序列化" class="headerlink" title="4、复杂对象的序列化与反序列化"></a>4、复杂对象的序列化与反序列化</h1><p><a class="link"   target="_blank" rel="noopener" href="https://blog.csdn.net/dyllove98/article/details/9455287" >复杂对象的序列化<i class="fas fa-external-link-alt"></i></a></p>
<p><em><strong>参考文献</strong></em></p>
<p><a class="link"   target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/103160425" >知乎 ： JavaScript的强语言之路—另类的JSON序列化与反序列化<i class="fas fa-external-link-alt"></i></a></p>

            </div>

            

            
                <ul class="post-tags-box">
                    
                        <li class="tag-item">
                            <a href="/tags/%E5%BA%8F%E5%88%97%E5%8C%96/">#序列化</a>&nbsp;
                        </li>
                    
                        <li class="tag-item">
                            <a href="/tags/%E5%8F%8D%E5%BA%8F%E5%88%97%E5%8C%96/">#反序列化</a>&nbsp;
                        </li>
                    
                </ul>
            

            
                <div class="article-nav">
                    
                        <div class="article-prev">
                            <a class="prev"
                               rel="prev"
                               href="/2023/06/05/Javascript%E4%B9%8B%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/"
                            >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                                <span class="title flex-center">
                                <span class="post-nav-title-item">Javascript之数据类型</span>
                                <span class="post-nav-item">Prev posts</span>
                            </span>
                            </a>
                        </div>
                    
                    
                        <div class="article-next">
                            <a class="next"
                               rel="next"
                               href="/2023/06/05/Javascript%E4%B9%8B%E5%A0%86%E3%80%81%E6%A0%88%E4%B8%8E%E9%98%9F%E5%88%97/"
                            >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">Javascript之浅堆、栈与队列</span>
                                <span class="post-nav-item">Next posts</span>
                            </span>
                                <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                            </a>
                        </div>
                    
                </div>
            

            
        </div>

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            
<footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
                <span>2020</span> -
            
            2024
            
                &nbsp;<i class="fas fa-heart icon-animate"></i>
                &nbsp;<a href="/">aaton</a>
            
        </div>
        
            <script async 
                    src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <div class="website-count info-item">
                
                    Visitor Count&nbsp;<span id="busuanzi_value_site_uv"></span>&ensp;
                
                
                    Totalview&nbsp;<span id="busuanzi_value_site_pv"></span>
                
            </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.6.1</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    <div class="zoom-in-image-mask">
    <img class="zoom-in-image">
</div>


    

</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>







    
<script src="/js/code-block.js"></script>





<div class="post-scripts">
    
        
<script src="/js/post-helper.js"></script>

        
        
    
</div>



</body>
</html>
